// 导入 React 和 hooks
import React from 'react';
// 导入子组件
import {Toolbar} from './Toolbar';
import {CollectionsGrid} from './CollectionsGrid';
// 导入 TanStack Query Hook
import {useFilteredSpaceCollections} from '@/hooks/dashboard/useFilteredSpaceCollections';
// 导入活跃空间 Store
import {useActiveSpaceStore} from '@/stores/activeSpace';

/**
 * MainContent 组件的 props 类型定义
 */
interface MainContentProps {
    // 搜索查询字符串
    searchQuery: string;
    // 是否正在保存
    isSaving: boolean;
    // 添加集合处理函数
    onAddCollection: () => void;
}

/**
 * 主内容区域组件
 * 职责：
 * - 获取当前空间的集合数据（用于 Toolbar 展示）
 * - 根据搜索条件过滤集合（用于 Toolbar 显示搜索结果数）
 * - 将数据和控制参数分发给 Toolbar 和 CollectionsGrid
 * 
 * 注意：CollectionsGrid 同样使用 useFilteredSpaceCollections 获取数据，以确保拖拽排序的乐观更新即时生效；
 * 该组件只负责 Toolbar 所需的统计展示和控制参数分发。
 */
export const MainContent: React.FC<MainContentProps> = ({
    searchQuery,
    isSaving,
    onAddCollection,
}) => {
    // 获取当前活跃空间 ID
    const activeSpaceId = useActiveSpaceStore((s) => s.activeSpaceId);

    const {filteredCollections, collectionsCount, isLoading} = useFilteredSpaceCollections(
        activeSpaceId,
        searchQuery
    );

    return (
        <main className="h-full flex flex-col overflow-hidden min-w-0 min-h-0">
            {/* 顶部工具栏（固定高度，不参与滚动） */}
            <Toolbar
                collectionsCount={collectionsCount}
                loading={isLoading}
                searchQuery={searchQuery}
                filteredCount={filteredCollections.length}
                filteredCollections={filteredCollections}
                isSaving={isSaving}
                onAddCollection={onAddCollection}
            />

            {/* 内容区域：显示集合网格 */}
            <CollectionsGrid
                searchQuery={searchQuery}
                isSaving={isSaving}
                onAddCollection={onAddCollection}
            />
        </main>
    );
};
